<template>
  <view class="related-content">
    <view class="top-block view-block">
      <uni-section title="空压机200A-1号" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="state-box" v-if="datas1.data1">
        <text class="txt">{{ datas1.data1[0].name}}</text>
        <text class="txt">{{ datas1.data1[0].value}}</text>
      </view>

      <uni-row :gutter="50" class="row-list">
        <template v-for="(item, index) in datas1.data1">
          <uni-col :span="12" class="col-item" v-if="index>0"  :key="index + '_dats1'">
            <view class="lab-b">
              <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
              <text class="lab">{{ item.name }}</text>
            </view>
            <view class="val">{{ item.value }}</view>
          </uni-col>
        </template>
        
        <uni-col :span="12" class="col-item" v-for="(item, index) in datas1.data2" :key="index + '_dats2'">
          <view class="lab-b">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">{{ item.name }}</text>
          </view>
          <view class="val">{{ item.value }}</view>
        </uni-col>
        
      </uni-row>
    </view>

    <view class="view-block">
      <uni-section title="空压机200A-2号" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      <view class="state-box" v-if="datas2.data1">
        <text class="txt">{{ datas2.data1[0].name}}</text>
        <text class="txt">{{ datas2.data1[0].value}}</text>
      </view>
      
      <uni-row :gutter="50" class="row-list">
        <template v-for="(item, index) in datas2.data1">
          <uni-col :span="12" class="col-item" v-if="index>0"  :key="index + '_dats3'">
            <view class="lab-b">
              <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
              <text class="lab">{{ item.name }}</text>
            </view>
            <view class="val">{{ item.value }}</view>
          </uni-col>
        </template>
        
        <uni-col :span="12" class="col-item" v-for="(item, index) in datas2.data2" :key="index + '_dats4'">
          <view class="lab-b">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">{{ item.name }}</text>
          </view>
          <view class="val">{{ item.value }}</view>
        </uni-col>
        
        
      </uni-row>
    </view>

    <view class="view-block">
      <uni-section title="空压机200A-3号" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      
      <view class="state-box" v-if="datas3.data1">
        <text class="txt">{{ datas3.data1[0].name}}</text>
        <text class="txt">{{ datas3.data1[0].value}}</text>
      </view>
      
      <uni-row :gutter="50" class="row-list">
        <template v-for="(item, index) in datas3.data1">
          <uni-col :span="12" class="col-item" v-if="index>0"  :key="index + '_dats5'">
            <view class="lab-b">
              <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
              <text class="lab">{{ item.name }}</text>
            </view>
            <view class="val">{{ item.value }}</view>
          </uni-col>
        </template>
        
        <uni-col :span="12" class="col-item" v-for="(item, index) in datas3.data2" :key="index + '_dats6'">
          <view class="lab-b">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">{{ item.name }}</text>
          </view>
          <view class="val">{{ item.value }}</view>
        </uni-col>
      </uni-row>
    </view>

    <view class="view-block">
      <uni-section title="空压机100A-1号" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      
      <view class="state-box" v-if="datas4.data1">
        <text class="txt">{{ datas4.data1[0].name}}</text>
        <text class="txt">{{ datas4.data1[0].value}}</text>
      </view>
      
      <uni-row :gutter="50" class="row-list">
        <template v-for="(item, index) in datas4.data1">
          <uni-col :span="12" class="col-item" v-if="index>0"  :key="index + '_dats7'">
            <view class="lab-b">
              <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
              <text class="lab">{{ item.name }}</text>
            </view>
            <view class="val">{{ item.value }}</view>
          </uni-col>
        </template>
        
        <uni-col :span="12" class="col-item" v-for="(item, index) in datas4.data2" :key="index + '_dats8'">
          <view class="lab-b">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">{{ item.name }}</text>
          </view>
          <view class="val">{{ item.value }}</view>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>

<script>
import { getDeviceRunInfo } from '@/api/monitorCenter/index.js';
export default {
  data() {
    return {
      datas1: {},
      datas2: {},
      datas3: {},
      datas4: {}
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const [res1, res2, res3, res4] = await Promise.all([
        getDeviceRunInfo('kyj_one'), 
        getDeviceRunInfo('kyj_two'), 
        getDeviceRunInfo('kyj_three'), 
        getDeviceRunInfo('kyj_four')
      ]);
      if (res1.code != 200 || res2.code != 200 || res3.code != 200 || res4.code != 200) return
      this.datas1 = this.formatDeviceData(res1.data, 1)
      this.datas2 = this.formatDeviceData(res2.data, 2)
      this.datas3 = this.formatDeviceData(res3.data, 3)
      this.datas4 = this.formatDeviceData(res4.data, 4)
    },
    formatDeviceData(data, type) {
      const dataMapping = {
        1: { data1: this.mapMonitorData1(data), data2: this.mapMonitorData2(data) },
        2: { data1: this.mapMonitorData3(data), data2: this.mapMonitorData4(data) },
        3: { data1: this.mapMonitorData5(data), data2: this.mapMonitorData6(data) },
        4: { data1: this.mapMonitorData7(data), data2: this.mapMonitorData8(data) }
      };
      return dataMapping[type] || { data1: [], data2: [] };
    },

    mapMonitorData1(data) {
      if (data.t_200078 && data.t_200078 > 100) {
        this.openNotify('空压机200A-1号');
      }
      return [
        { name: '运行状态', value: this.statusMap(data.t_200027, 1) },
        { name: '运行总时间', value: (data.t_200003 || 0) + 'H' },
        { name: '负载总时间', value: (data.t_200004 || 0) + 'H' },
        { name: '前轴承温度', value: (data.t_200017 || 0) + '℃' },
        { name: '供气压力', value: (data.t_200001 || 0) + 'MPa' },
        { name: '后轴承温度', value: (data.t_200063 || 0) + '℃' },
        { name: '排气温度', value: (data.t_200078 || 0) + '℃' },
        { name: '主机转速', value: (data.t_200041 || 0) + 'RPM' },
        { name: '风机转速', value: (data.t_200042 || 0) + 'RPM' }
      ];
    },
    mapMonitorData2(data) {
      return [
        { name: '主机本次用电', value: (data.t_200061 || 0) + 'kW·h' },
        { name: '风机本次用电', value: (data.t_200066 || 0) + 'kW·h' },
        { name: '主机输出电压', value: (data.t_200033 || 0) + 'V' },
        { name: '风机输出电压', value: (data.t_200037 || 0) + 'V' },
        { name: '主机输出电流', value: (data.t_200034 || 0) + 'A' },
        { name: '风机输出电流', value: (data.t_200038 || 0) + 'A' },
        { name: '主机输出功率', value: (data.t_200036 || 0) + 'kW' },
        { name: '风机输出功率', value: (data.t_200040 || 0) + 'kW' },
        { name: '主机转速', value: (data.t_200041 || 0) + 'RPM' },
        { name: '风机转速', value: (data.t_200042 || 0) + 'RPM' },
        { name: '主机输出频率', value: (data.t_200035 || 0) + 'Hz' },
        { name: '风机输出频率', value: (data.t_200039 || 0) + 'Hz' },
        { name: '油滤器使用时间', value: (data.t_200011 || 0) + 'H' },
        { name: '油分器使用时间', value: (data.t_200012 || 0) + 'H' },
        { name: '润滑脂使用时间', value: (data.t_200015 || 0) + 'H' },
        { name: '润滑油使用时间', value: (data.t_200014 || 0) + 'H' }
      ];
    },

    mapMonitorData3(data) {
      if (data.t_210053 && data.t_210053 > 100) {
        this.openNotify('空压机200A-2号');
      }
      return [
        { name: '运行状态', value: this.statusMap(data.t_210024, 1) },
        { name: '运行总时间', value: (data.t_210003 || 0) + 'H' },
        { name: '负载总时间', value: (data.t_210004 || 0) + 'H' },
        { name: '前轴承温度', value: (data.t_210014 || 0) + '℃' },
        { name: '供气压力', value: (data.t_210001 || 0) + 'MPa' },
        { name: '后轴承温度', value: (data.t_210044 || 0) + '℃' },
        { name: '排气温度', value: (data.t_210053 || 0) + '℃' },
        { name: '主机转速', value: (data.t_210038 || 0) + 'RPM' },
        { name: '风机转速', value: (data.t_210039 || 0) + 'RPM' }
      ];
    },
    mapMonitorData4(data) {
      return [
        { name: '主机本次用电', value: (data.t_210042 || 0) + 'kW·h' },
        { name: '风机本次用电', value: (data.t_210047 || 0) + 'kW·h' },
        { name: '主机输出电压', value: (data.t_210030 || 0) + 'V' },
        { name: '风机输出电压', value: (data.t_210034 || 0) + 'V' },
        { name: '主机输出电流', value: (data.t_210031 || 0) + 'A' },
        { name: '风机输出电流', value: (data.t_210035 || 0) + 'A' },
        { name: '主机输出功率', value: (data.t_210033 || 0) + 'kW' },
        { name: '风机输出功率', value: (data.t_210037 || 0) + 'kW' },
        { name: '主机转速', value: (data.t_210038 || 0) + 'RPM' },
        { name: '风机转速', value: (data.t_210039 || 0) + 'RPM' },
        { name: '主机输出频率', value: (data.t_210016 || 0) + 'Hz' },
        { name: '风机输出频率', value: (data.t_210036 || 0) + 'Hz' },
        { name: '油滤器使用时间', value: (data.t_210008 || 0) + 'H' },
        { name: '油分器使用时间', value: (data.t_210009 || 0) + 'H' },
        { name: '润滑脂使用时间', value: (data.t_210012 || 0) + 'H' },
        { name: '润滑油使用时间', value: (data.t_210011 || 0) + 'H' }
      ];
    },

    mapMonitorData5(data) {
      if (data.t_220053 && data.t_220053 > 100) {
        this.openNotify('空压机200A-3号');
      }
      return [
        { name: '运行状态', value: this.statusMap(data.t_220024, 1) },
        { name: '运行总时间', value: (data.t_220003 || 0) + 'H' },
        { name: '负载总时间', value: (data.t_220004 || 0) + 'H' },
        { name: '前轴承温度', value: (data.t_220014 || 0) + '℃' },
        { name: '供气压力', value: (data.t_220001 || 0) + 'MPa' },
        { name: '后轴承温度', value: (data.t_220044 || 0) + '℃' },
        { name: '排气温度', value: (data.t_220053 || 0) + '℃' },
        { name: '主机转速', value: (data.t_220038 || 0) + 'RPM' },
        { name: '风机转速', value: (data.t_220039 || 0) + 'RPM' }
      ];
    },
    mapMonitorData6(data) {
      return [
        { name: '主机本次用电', value: (data.t_220042 || 0) + 'kW·h' },
        { name: '风机本次用电', value: (data.t_220047 || 0) + 'kW·h' },
        { name: '主机输出电压', value: (data.t_220030 || 0) + 'V' },
        { name: '风机输出电压', value: (data.t_220034 || 0) + 'V' },
        { name: '主机输出电流', value: (data.t_220031 || 0) + 'A' },
        { name: '风机输出电流', value: (data.t_220035 || 0) + 'A' },
        { name: '主机输出功率', value: (data.t_220033 || 0) + 'kW' },
        { name: '风机输出功率', value: (data.t_220037 || 0) + 'kW' },
        { name: '主机转速', value: (data.t_220038 || 0) + 'RPM' },
        { name: '风机转速', value: (data.t_220039 || 0) + 'RPM' },
        { name: '主机输出频率', value: (data.t_220016 || 0) + 'Hz' },
        { name: '风机输出频率', value: (data.t_220036 || 0) + 'Hz' },
        { name: '油滤器使用时间', value: (data.t_220008 || 0) + 'H' },
        { name: '油分器使用时间', value: (data.t_220009 || 0) + 'H' },
        { name: '润滑脂使用时间', value: (data.t_220012 || 0) + 'H' },
        { name: '润滑油使用时间', value: (data.t_220011 || 0) + 'H' }

        // { name: '供气压力(MPa)', value: (data.t_220001 || 0) + 'MPa' },
        // { name: '空滤器使用时间', value: (data.t_220010 || 0) + 'H' },
      ];
    },

    mapMonitorData7(data) {
      if (data.t_320053 && data.t_320053 > 100) {
        this.openNotify('空压机100A-1号');
      }
      return [
        { name: '运行状态', value: this.statusMap(data.t_320024, 2) },
        { name: '运行总时间', value: (data.t_320003 || 0) + 'H' },
        { name: '负载总时间', value: (data.t_320004 || 0) + 'H' },
        { name: '前轴承温度', value: (data.t_320014 || 0) + '℃' },
        { name: '供气压力', value: (data.t_320001 || 0) + 'MPa' },
        { name: '后轴承温度', value: (data.t_320044 || 0) + '℃' },
        { name: '排气温度', value: (data.t_320053 || 0) + '℃' },
        { name: '主机转速', value: (data.t_320038 || 0) + 'RPM' },
        { name: '风机转速', value: (data.t_320039 || 0) + 'RPM' }
      ];
    },
    mapMonitorData8(data) {
      return [
        { name: '主机本次用电', value: (data.t_320042 || 0) + 'kW·h' },
        { name: '风机本次用电', value: (data.t_320047 || 0) + 'kW·h' },
        { name: '主机输出电压', value: (data.t_320030 || 0) + 'V' },
        { name: '风机输出电压', value: (data.t_320034 || 0) + 'V' },
        { name: '主机输出电流', value: (data.t_320031 || 0) + 'A' },
        { name: '风机输出电流', value: (data.t_320035 || 0) + 'A' },
        { name: '主机输出功率', value: (data.t_320033 || 0) + 'kW' },
        { name: '风机输出功率', value: (data.t_320037 || 0) + 'kW' },
        { name: '主机转速', value: (data.t_320038 || 0) + 'RPM' },
        { name: '风机转速', value: (data.t_320039 || 0) + 'RPM' },
        { name: '主机输出频率', value: (data.t_320032 || 0) + 'HZ' },
        { name: '风机输出频率', value: (data.t_320036 || 0) + 'Hz' },
        { name: '油滤器使用时间', value: (data.t_320008 || 0) + 'H' },
        { name: '油分器使用时间', value: (data.t_320009 || 0) + 'H' },
        { name: '润滑脂使用时间', value: (data.t_320012 || 0) + 'H' },
        { name: '润滑油使用时间', value: (data.t_320011 || 0) + 'H' }
        // { name: '空滤器使用时间', value: (data.t_320010 || 0) + 'H' },
      ];
    },
    statusMap(value, type) {
      const STATUS_MAP = {
        1: '故障停机',
        2: '急停',
        3: '停机延时',
        4: '变频启动',
        5: '星启动',
        6: '角运行',
        7: '自动卸载运行',
        8: '自动加载运行',
        9: '空车过久停机',
        10: '设备已停止',
        11: '软启动',
        12: '预开主机变频器',
        15: '空车过久停机',
        16: '准备启动',
        17: '手动卸载运行',
        18: '手动加载运行',
        19: '主机变频器收到运行指令',
        21: '风机变频器收到运行指令',
        22: '变频运行',
        23: '温度过低',
        24: '断电得启准备',
        25: '系统泄放中'
      };
      const STATUS_MAP2 = {
        1: '故障停机 ',
        2: '急停,请复位!',
        3: '停机延时',
        4: '变频启动',
        5: '星启动',
        6: '角运行',
        7: '自动卸载运行',
        8: '自动加载运行',
        9: '空车过久停机',
        10: '设备已停止',
        11: '软启动',
        12: '预开主机变频器',
        13: '空车过久停机',
        14: '空车过久停机',
        15: '空车过久停机',
        16: '准备启动',
        17: '手动卸载运行',
        18: '手动加载运行',
        19: '主机变频器运行中',
        20: '预开主机变频器',
        21: '风机变频器运行中',
        22: '变频器运行中',
        23: '温度过低',
        24: '掉电准备启动',
        25: '系统泄放中',
        26: '低频运行过久停机',
        27: '停机泄放中',
        28: '重启主机变频器'
      };
      if (value) {
        let inx = parseInt(value);
        if (type == 2) {
          return STATUS_MAP2[inx];
        } else {
          return STATUS_MAP[inx];
        }
      } else {
        return '--';
      }
    },
    openNotify(){
      
    }
  }
};
</script>

<style lang="scss" scoped>
.related-content {
  overflow-y: auto;
  
  .top-block {
    // box-shadow: 0rpx -15rpx 21rpx -5rpx rgba(0, 0, 0, 0.25);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }

  .view-block {
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 40rpx;
  }

  .state-box {
    width: 100%;
    height: 65rpx;
    background: rgba(46, 125, 255, 0.1);
    border-radius: 5rpx 5rpx 5rpx 5rpx;
    padding: 13rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 26rpx;
    color: #2e7dff;
    line-height: 26rpx;
    margin-bottom: 23rpx;
  }

  .row-list {
    .col-item {
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      padding-bottom: 30rpx;
    }
    .lab-b {
      .icon {
        width: 22rpx;
        height: 13rpx;
      }

      .lab {
        padding-left: 5rpx;
        color: rgba(16, 44, 89, 0.5);
      }
    }
    .val {
      color: rgba(16, 44, 89, 1);
    }
  }
}

::v-deep .uni-section .uni-section-header {
  padding: 0 0 20rpx 0;
}
</style>
